<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <title>Document</title>
</head>
<style>
    body {
        padding: 0;
        margin: 0;
    }
    .patrolmap {
        position: absolute;
        left: 0;
        top: 30px;
        width: 500px;
        height: 300px;
    }
    .patrol-bcimg {
        width: 100%;
        height: 100%;
        background: url('/image/patrol-map.png') no-repeat;
        background-size: 100%;
    }
    .line1 {
        position: absolute;
        top: 57px;
        left: 107px;
        width: 40px;
        height: 5px;
        transform: rotate(91deg);
        background-color: brown;
    }
    .line2 {
        position: absolute;
        top: 89px;
        left: 102px;
        width: 25px;
        height: 5px;
        transform: rotate(129deg);
        background-color: brown;
    }
    .line3 {
        position: absolute;
    top: 167px;
    left: 45px;
    width: 121px;
    height: 5px;
    transform: rotate(90deg);
    background-color: brown;
    }
    .line4 {
        position: absolute;
        top: 227px;
        left: 102px;
        width: 271px;
        height: 5px;
        transform: rotate(0);
        background-color: brown;
    }
    .line5 {
        position: absolute;
        top: 227px;
        left: 376px;
        width: 0;
        height: 5px;
        transform: rotate(0);
        background-color: brown;
    }

    /* .line4::after {
        position: absolute;
        top: -2px;
        right: -2px;
        width: 10px;
        height: 10px;
        background: red;
        content: '';
        z-index: 7;
        border-radius: 8px;
    } */
    .line-unselect::before {
        position: absolute;
        top: -3px;
        left: -8px;
        width: 10px;
        height: 10px;
        background: red;
        content: '';
        z-index: 7;
        border-radius: 8px;
    }
    .line-selected::before {
        position: absolute;
        top: -3px;
        left: -8px;
        width: 10px;
        height: 10px;
        background-color: aqua;
        content: '';
        z-index: 7;
        border-radius: 8px;
    }
    .line-cover {
        position: relative;
        height: 100%;
        /* background-color: aqua; */
    }

    @keyframes aaa
    {
       0% {
            width: 0;
            
        }
        100%{
            width: 100%;
        }
    }
</style>
<body>
    <div class="patrolmap">
        <div class="patrol-bcimg">
                <div class="line-unselect line1">
                    <div id='line-cover' class="line-cover"></div>
                </div>
                <div class="line-unselect line2">
                        <div id='line-cover' class="line-cover"></div>
                </div>
                <div class="line-unselect line3">
                    <div id='line-cover' class="line-cover"></div>
                </div>
                <div class="line-unselect line4">
                    <div id='line-cover' class="line-cover"></div>
                </div>
                <div class="line-unselect line5">
                        <div id='line-cover' class="line-cover"></div>
                    </div>
        </div>
    </div>
</body>
<script>


     // 开始巡更
         //  $('.line1').addClass("selected");
        // 第一个点变亮，停止一段时间
        // 给第一条线段加上动画
        // 到达下一个点，停止一段时间，第一个点伪类消失，第二个点变亮，以此类推，到达最后一个点，最后一个点变亮，上一个消失，
    function  startPatrol() {
      
    };
    // 暂停巡更
    // pausePatrol() {
    //     // 不用找到当前线段
    //     // 给动画加上停止
    // };
    // // 继续巡更
    // continuePatrol() { 
    //     // 给动画加上running
    // };
    // // 重置巡更
    // resetPatrol() {
    //     // 清除最后一条线段的样式，
    //     // 调用开始巡更的方法
    // };

// 五秒以后播放第一段
    function animotion1() {
        $('.line-cover').css('width',0)
        $('.line1').removeClass('line-unselect').addClass("line-selected");
        $('.line5').removeClass('line-selected').addClass("line-unselect");
        setTimeout(()=> {
                // 五秒之后开始播放动画
                $('.line1 .line-cover').css('background-color', 'aqua');
                $('.line1 .line-cover').css('animation', `aaa 10s`);
            },5000)
    }
    
// 五秒钟以后播放第二段
    function animotion2(){
        // 第一个点恢复
        $('.line1').removeClass('line-selected').addClass("line-unselect");
        $('.line2').removeClass('line-unselect').addClass("line-selected");
        // 五秒以后播放第二个动画
        setTimeout(()=> {
            // 第二个点开始走
           
            $('.line2 .line-cover').css('background-color', 'aqua');
            $('.line2 .line-cover').css('animation', `aaa 10s`);
        },5000)
    }
// 五秒中以后播放第三段
function animotion3(){
        // 第一个点恢复
        $('.line2').removeClass('line-selected').addClass("line-unselect");
        $('.line3').removeClass('line-unselect').addClass("line-selected");
        // 五秒以后播放第二个动画
        setTimeout(()=> {
            // 第二个点开始走
            $('.line3 .line-cover').css('background-color', 'aqua');
            $('.line3 .line-cover').css('animation', `aaa 10s`);
        },5000)
    }
// 五秒中以后播放第四段
    function animotion4(){
        // 第一个点恢复
        $('.line3').removeClass('line-selected').addClass("line-unselect");
        $('.line4').removeClass('line-unselect').addClass("line-selected");
        // 五秒以后播放第二个动画
        setTimeout(()=> {
            // 第二个点开始走
            $('.line4 .line-cover').css('background-color', 'aqua');
            $('.line4 .line-cover').css('animation', `aaa 10s`);
        },5000)
    }
// 五秒中以后播放第五段
function animotion4(){
        // 第一个点恢复
        $('.line4').removeClass('line-selected').addClass("line-unselect");
        $('.line5').removeClass('line-unselect').addClass("line-selected");
        // 五秒以后播放第二个动画
    }
</script>
</html>